<template>
  <el-card header="影厅列表">
    <!-- 列表 -->
    <el-form :inline="true">
      <el-form-item label="影厅名称">
        <el-input placeholder="请输入影厅名称" v-model="queryForm.hall_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="queryForm.pageIndex=1;queryData()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 展示数据 -->
    <el-table max-height="550" :data="listData" border stripe v-loading="isLoading" element-loading-text="正在加载数据">
      <el-table-column label="影厅名称" prop="hall_name"></el-table-column>
      <el-table-column label="电影标签" min-width="150">
        <template #default="{row}">
          <el-tag :type="index%2==0?'':'danger'" class="ml-2" v-for="(item,index) in row.tags.split(',')" :key="item">{{item}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="总坐位数" prop="sites">
        <template #default="{row}">
          {{getSiteCount(row.sites)}}
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作" width="160px" align="center">
        <!-- 自定义渲染 替换默认 -->
        <template #default="{ row }">
          <el-button type="warning" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页信息 -->
    <div class="flex flex-row justify-between items-center mt-[10px]">
      <div>当前第{{queryForm.pageIndex}}页，共{{pageCount}}页，共{{totalCount}}条数据</div>
      <el-pagination
        layout="prev,pager,next"
        background
        :total="totalCount"
        :current-page="queryForm.pageIndex"
        @current-change="currentPageChange">
      </el-pagination>
    </div>
  </el-card>
  <el-drawer 
    title="编辑影厅信息" 
    :close-on-press-escape="false" 
    :close-on-click-modal="false"
    v-model="isShowDrawer"
    size="700px">
    <el-form label-width="100px">
      <el-form-item label="影厅名称">
        <el-input v-model="currentEditRow.hall_name" placeholder="请输入影厅名称"></el-input>
      </el-form-item>
      <el-form-item label="电影标签">
        <el-input v-model="currentEditRow.tags" placeholder="请输入电影标签"></el-input>
      </el-form-item>
      <el-form-item label="总座位数">
        <el-input v-model="currentEditRow.sites" placeholder="请输入总座位数"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="currentEditRow.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveEditData">保存数据</el-button>
        <el-button type="danger" @click="closeDrawer">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import { Search, CirclePlus } from "@element-plus/icons-vue";
import API from "../../utils/API/index.js";
import { ElMessage, ElMessageBox } from "element-plus";

// import {onMounted,ref} from "vue";
// import axios from "axios";
export default {
  name: "HallInfoList",
  //data里面的数据是页面上可以使用的数据
  data() {
    return {
      Search,
      CirclePlus,
      listData: [],
      isLoading:true,
      //总记录数
      totalCount:0,
      //总页数
      pageCount:0,
      //查询参数
      queryForm:{
        pageIndex:1,
        hall_name:""
      },
      //是否显示编辑信息的抽屉组件
      isShowDrawer:false,
      //1.拿到数据
      currentEditRow: {
        hall_id: 0,
        hall_name: "",
        sites: "",
        tags: "",
        address:"",
      },
    };
  },
  methods: {
    //写一个方法，获取所有管理员的数据
    async queryData() {
      this.isLoading=true;

      //原来是获取所有数据 现在分页获取数据
      let resp = await API.hallInfo.getListByPage(this.queryForm);
      let result=resp.data;  //请求回来的结果保存在这里
      if(result.status=="success") {
        this.totalCount = result.data.totalCount;
        this.pageCount = result.data.pageCount;
        this.queryForm.pageIndex = result.data.pageIndex;
        this.listData=result.data.listData;
      }
      else {
        ElMessage.error(result.msg);
      }

      this.isLoading=false;
    },
    //点击删除按钮
    async handleDelete(row) {
        //console.log(row.id);
        //有了这个id以后，就可以调用接口去删除数据
        try {
            let resp= await API.hallInfo.deleteById(row.id);
            if(resp.data.status == "success") {
                ElMessage.success(resp.data.msg);
                //重新请求数据
                this.queryData();
            }
        }
        catch(error) {
            ElMessage.error("服务器错误，请联系管理员");
        }
    },
    //点击分页的页码按钮以后
    currentPageChange(newPageIndex){
    //将新的 页面赋值给查询参数pageIndex
    this.queryForm.pageIndex= newPageIndex;
    this.queryData();
    },
    //用户点击编辑按钮
    handleEdit(row) {
      //第一步：先显示当前的抽屉组件
      this.isShowDrawer=true;
      //第二步：获取当前编辑的这一行数据    2.填充数据
      this.currentEditRow=row;

      //console.log(row);
    },
    //关闭抽屉组件
    closeDrawer() {
      this.isShowDrawer=false;
    },
    async saveEditData() {
      //去调用API接口去保存数据
      let resp = await API.hallInfo.update(this.currentEditRow);
      let result = resp.data;
      if(result.status == "success") {
        //修改成功
        ElMessage.success("修改成功");
        this.isShowDrawer=false;
      }
      else {
        ElMessageBox.alert("修改失败，请重试或联系管理员","提示");
      }
    },
    getSiteCount(arrStr) {
      try {
        let arr = JSON.parse(arrStr);
        return arr.flat(Infinity).filter((item) => item == 0).length;
      } catch (error) {
          return 0;
      }
    },

  },
  
  //表示当前的vue创建的时候，会自动执行的代码
  created() {
    this.queryData();
  },
};
</script>

<style scoped lang="scss">
</style>